<script setup>
import Tabbar from "../component/Tabbar.vue";
import { ref } from 'vue';

const holidayList = ref([
  {
    id: 1,
    title: '2024年春节放假',
    startDate: '2023-11-16 00:00:00',
    endDate: '2023-11-16 00:00:00',
    duration: '26天',
    status: 'unfinished',
    state: '28人已完成，赶紧登记吧',
    targetUrl: "/pages/Homepage/stay",
    btnText: '登记'
  },
  {
    id: 2,
    title: '2024年春节放假',
    startDate: '2023-11-16 00:00:00',
    endDate: '2023-11-16 00:00:00',
    duration: '26天',
    status: 'approving',
    state: '审批中',
    targetUrl: "/pages/Homepage/pending",
    btnText: '撤销登记'
  },
  {
    id: 3,
    title: '2024年春节放假',
    startDate: '2023-11-16 00:00:00',
    endDate: '2023-11-16 00:00:00',
    duration: '26天',
    status: 'rejected',
    state: '审批不通过',
    targetUrl: "/pages/Homepage/rejected",
    btnText: '修改登记'
  },
  {
    id: 4,
    title: '2024年春节放假',
    startDate: '2023-11-16 00:00:00',
    endDate: '2023-11-16 00:00:00',
    duration: '26天',
    status: 'approved',
    state: '审批通过',
    targetUrl: "/pages/Homepage/approved1",
    btnText: '离校申请'
  },
  {
    id: 5,
    title: '2024年春节放假',
    startDate: '2023-11-16 00:00:00',
    endDate: '2023-11-16 00:00:00',
    duration: '26天',
    status: 'approvedStay',
    state: '审批通过',
    targetUrl: "/pages/Homepage/approved2",
    btnText: '延长留校'
  }
]);


const pageType = ref('hasData');
const switchPage = () => {
  pageType.value = pageType.value === 'hasData' ? 'noData' : 'hasData';
};

const goToPage = (item) => {
  uni.navigateTo({
    url: item.targetUrl
  });
};
</script>

<template>
  <view>
    <view>

      <view class="switch-btn" @click="switchPage">
        <text>切换页面</text>
      </view>

      <view v-if="pageType === 'hasData'" class="cd">

        <view class="ts">
          <view class="title1">{{ holidayList.length }}个批次需要登记</view>
        </view>

        <view
            v-for="(item, index) in holidayList"
            :key="item.id"
            class="pc"
        >

          <image class="icon" src="/static/image/bg@2x.png" @click="goToPage(item)"></image>

          <view class="zj">

            <view class="lg">

              <image class="bz" src="/static/image/bz@2x.png"></image>

              <view>
                <text class="title2">{{ item.title }}</text>
              </view>

            </view>

            <view class="wz">

              <text class="title3">
                假期开始时间：{{ item.startDate }} <br>
                假期结束时间：{{ item.endDate }} <br>
                时长：{{ item.duration }}
              </text>

              <hr class="hr">

              <view class="state-btn-row">

                <text class="state-text">{{ item.state }}</text>

                <view class="status-btn-row">

                  <button
                      class="action-btn"
                      @click="goToPage(item)"
                  >
                    {{ item.btnText }}
                  </button>

                </view>

              </view>

            </view>

          </view>

        </view>

      </view>

      <view v-else class="no-data-page">
        <image class="my" src="/static/image/bmy@2x.png" alt="无数据提示图片"></image>
      </view>

    </view>

    <view>
      <Tabbar :cur-index="0"/>
    </view>

  </view>
</template>

<style scoped>
.switch-btn {
  position: fixed;
  bottom: 55px;
  left: 20px;
  z-index: 100;
  padding: 6px 12px;
  background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 122, 255, 0.25);
}

.cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 0;
  margin: 0;
  padding-bottom: 80px;
}

.ts {
  width: 100%;
  height: 32px;
  background: #FFEEDD;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 0;
}

.title1 {
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #FF5F00;
  text-align: center;
  line-height: 17px;
  white-space: nowrap;
}

.pc {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 10px;
}

.icon {
  width: 351px;
  height: 160px;
  display: block;
}

.zj{
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 0;
  padding-right: 10px;
}

.bz{
  width: 22px;
  height: 22px;
  display: block;
  margin-right: 8px;
}

.title2 {
  width: 119px;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #212121;
}

.lg {
  display: flex;
  align-items: center;
}

.title3{
  width: 203px;
  height: 66px;
  font-weight: 400;
  font-size: 12px;
  color: #5D5E5D;
  line-height: 22px;
}

.hr{
  width: 100%;
  margin: 8px 0;
  border: none;
  border-top: 1px solid #ccc;
}

.state-btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -7px;
}

.state-text {
  font-weight: 400;
  font-size: 12px;
  color: #5D5E5D;
}

.status-btn-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

.action-btn {
  background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
  color: white;
  border: none;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  margin: 0;
}

.action-btn:active {
  background-color: #0066cc;
}

.no-data-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.my{
  width: 170px;
  height: 170px;
}

</style>